<template>
	<div class="w-headerpage">
		<div class="headerbox">
			<div class="w-width">
				<div class="head flex hb vc">
          <div class="w-logo-box">
            <router-link to="/">
              <img src="../../assets/img/index/logo1.png" alt="" class="w-logo" ondragstart="return false">
            </router-link>
          </div>
					<div v-if="isLogin == 1" class="w-logininfo flex vc">
						<div class="flex vc">
							<p>您好</p>
							<img src="../../assets/img/index/ren.png" alt="" class="logonimg">
							<p>{{user.nickname}}</p>
						</div>
						<router-link to="/person">个人中心</router-link>
						<div @click="quit">退出登录</div>
					</div>
				</div>
        <div class="header_bottom_box">
          <div class="headbottom flex hb vc">
            <div class="headul flex hb">
              <div class="headli flex vc" v-for="(v,i) in navList" :key="i">
                <router-link :to="v.path" :class="[{active:v.id==navNum},'flex hb vc']">
                  <p>{{ v.name }}</p>
                </router-link>
                <div class="w-dian"></div>
                <ul class="submenu_box" v-if="(v.children || []).length">
                  <li v-for="(son, index) in v.children" :key="index">
                    <router-link :to="{ path: v.path, query: { deAcBig: son.deAcBig } }">{{ son.name }}</router-link>
                  </li>
                </ul>
              </div>
            </div>
            <div class="w-searchbox">
              <el-form ref="form" :model="sizeForm" class="w-form flex vc">
                <el-form-item>
                  <el-input v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item>
<!--                  <el-button @click="onSubmit" icon="el-icon-search">-->
                  <el-button class="w-search-btn" @click="onSubmit">
                    <img class="el-icon--right" src="../../assets/img/icon/icon_search.png" alt="">
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <router-link to="/login" class="login" v-if="isLogin == 0">登录</router-link>
          </div>
        </div>
			</div>
		</div>

		<div class="conbox" v-if="isSearch">
			<div class="w-width">
				<div class="w-searcon" >
					<div class="w-searcon-box">
						<div class="w-backbox flex vc hs" @click="back()">
							<img src="../../assets/img/index/back.png" alt="" class="w-back">
							<p>返回</p>
						</div>
						<div v-if="isdetail==0">
							<h4>搜索结果</h4>
							<CommonList :List="List" @sendId='sendId'></CommonList>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
							 :total="total">
							</el-pagination>
						</div>
						<detailPage :info='info' v-if="isdetail==1"></detailPage>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import detailPage from "./detail"
	import {userInfo,serach} from '@/api/login'
	import {articleDetail} from '@/api/article'
  import {projectClassList} from "../../api/project";
  import {articleMenu} from "../../api/article";
	export default {
		name: "Header",
		components: {
			"detailPage": detailPage
		},
		props: ["navNum"],
		data() {
			return {
				isLogin:0,
				sizeForm: {
					name: '',
				},
				user: {},
				navList: [{
						id: 1,
						name: '首页',
						path: '/'
					},
					{
						id: 2,
						name: '关于我们',
						path: '/aboutus',
            children: [
              {
                deAcBig: 1,
                name: '基金会简介'
              },
              {
                deAcBig: 2,
                name: '基金会组织架构'
              },
              {
                deAcBig: 3,
                name: '基金会规章制度'
              },
              {
                deAcBig: 4,
                name: '联系方式'
              }
            ]
					},
					{
						id: 3,
						name: '新闻中心',
						path: '/newsList',
            children: [
              {
                deAcBig: 1,
                name: '新闻动态'
              },
              {
                deAcBig: 2,
                name: '通知公告'
              }
            ]
					},
					{
						id: 4,
						name: '捐款项目',
						path: '/donation_projects',
            children: []
					},
					{
						id: 5,
						name: '捐赠鸣谢',
						path: '/donation_thank',
            children: [
              {
                deAcBig: 1,
                name: '捐赠展示'
              },
              {
                deAcBig: 2,
                name: '受益者感言'
              },
              {
                deAcBig: 3,
                name: '志愿者风采'
              }
            ]
					},
					{
						id: 6,
						name: '信息公开',
						path: '/infoOpen',
            children: [
              {
                deAcBig: 1,
                name: '年度工作报告'
              },
              {
                deAcBig: 2,
                name: '财务审计报告'
              },
              {
                deAcBig: 3,
                name: '财务报告'
              },
              {
                deAcBig: 4,
                name: '年度捐赠收入和支出'
              },
              {
                deAcBig: 5,
                name: '基金会刊物及年报'
              }
            ]
					},
					{
						id: 7,
						name: '捐赠指南',
						path: '/donation_guide',
            children: [
              {
                deAcBig: 1,
                name: '捐赠形式'
              },
              // {
              //   deAcBig: 2,
              //   name: '捐赠流程'
              // },
              {
                deAcBig: 2,
                name: '捐赠答疑'
              }
            ]
					},
					{
						id: 8,
						name: '下载中心',
						path: '/download'
					},
				],
				// 列表
				List: [],
				size: 2,
				page: 1,
				total: 0,
				// 详情
				isdetail: 0,
				info: {},
				word:'',
				isSearch:false

			};
		},
		created () {
			this.sendId()
			if(window.localStorage.getItem('user_token')!=null){
				userInfo().then(response => {
				  this.user = response.data
					this.isLogin=1
				})
			}
		},

    mounted() {
		  // 退出登录事件
		  this.$eventBus.$on('logoutEvent', (redirectTo) => {
        this.quit(redirectTo)
      })

      // 获取子菜单
      this.getClassifyList()
      this.getAboutList()
    },

		methods: {
      // 获取捐赠项目分类
		  getClassifyList() {
        projectClassList().then(response => {
          let cacheList = response.data
          let cacheResult = []

          cacheList.forEach((item, index) => {
            cacheResult.push({
              name: item.className,
              deAcBig: index + 1
            })
          })

          this.$set(this.navList[3], 'children', cacheResult)
        })
      },

      // 获取关于我们子菜单
      getAboutList() {
        articleMenu({
          where: []
        }).then(res => {
          let cacheList = res.data

          cacheList.forEach(item => {
            if (item.name === '关于我们') {
              console.log(item.children)
              let cacheList = item.children
              let cacheResult = []

              cacheList.forEach((item, index) => {
                cacheResult.push({
                  name: item.name,
                  deAcBig: index + 1
                })
              })

              // this.$set(this.navList[1], 'children', cacheResult)
            }
          })
        })
      },

			onSubmit() {
				this.page=0
				this.word = this.sizeForm.name
				this.isSearch=true
				this.$emit('isSearch',this.isSearch)
				this.getList()
			},
			// 退出登录
			quit(redirectTo){
				this.isLogin = 0
				window.localStorage.removeItem("user_token")
        this.$router.replace(redirectTo === undefined ? '/' : redirectTo).catch(err => {
          this.$router.go(0)
        })
			},
			getList() {
				serach({
					size: this.size,
					page: this.page,
					word: this.word,
				}).then(response => {
					this.List = response.data.list
					this.total = response.data.total
					this.List.forEach(v => {
						v.con = v.title
					})
				})
			},
			sendId(data) {
				if (data) {
					this.getDetail(data)
				}
			},
			getDetail(id) {
				this.isdetail = 1
				console.log(this.isdetail)
				articleDetail({
					id: id,
				}).then(response => {
					this.info = response.data
				})
			},
			// 分页
			handleCurrentChange(currentPage) {
				this.page = currentPage;
				this.getList()
			},
			back(){
				if(this.isdetail==1){
					this.isdetail=0
				}else if(this.isdetail==0){
					this.isSearch=false
					this.$emit('isSearch',this.isSearch)
				}
			}
		}
	};
</script>

<style>
.w-searchbox .el-input input {
  color: #ffffff;
}
</style>

<style scoped>
	.w-backbox p{
		font-size: 18px
	}
	.w-back{
		width: 20px;
		padding-right: 8px;
	}
	.w-searcon {
    width: 70%;
		padding-top: 30px;
	}

	.w-searcon-box {
		background: #fff;
		padding: 40px;
	}

	.w-searcon h4 {
		font-size: 28px;
		padding: 30px 0;
	}

	/* .................... */
	.w-width {
		width: 70%;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
	/* ...................... */
	.w-logininfo{
		font-size: 14px;
    position: absolute;
    right: 20px;
    top: 35px;
    z-index: 999;
	}
	.w-logininfo>div{
		border-right: 1PX solid #ffffff;
		padding:0 10px;
		line-height: 1;
	}

	.w-logininfo>div:last-child{
		border: none;
		padding-right: 0;
		cursor: pointer;
	}

	.w-logininfo>a{
		line-height: 1;
		padding: 0 10px;
		font-size: 14px;
		display: block;
		color: #ffffff;
		border-right: 1PX solid #ffffff;
	}

	.logonimg{
		width: 16px;
		height: 16px;
		display: block;
		margin-left: 10px;
		margin-right: 2px;;
	}

	.w-width {
		width: 100%;
		margin: 0 auto;
    display: flex;
    justify-content: center;
	}

	.headerbox {
		//background: linear-gradient(#E9DEDE, #fff);
    background: url("../../assets/img/bg/header_bg.png");
		height: 160PX;
    position: relative;
	}

	.head {
    width: 70%;
		height: 80PX;
    color: #ffffff;
		//border-bottom: 1PX solid #D2D2D2;
    position: relative;
	}

  .header_bottom_box {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(115, 26, 26);
    z-index: 999;
  }

  .headbottom {
    min-width: 600PX;
    width: 70%;
  }

	.login {
		font-size: 16px;
		color: #ffffff;
	}

  _:-ms-fullscreen, :root .login {
    font-size: 18px;
  }

  .w-logo-box {
    width: 100%;
    position: absolute;
    top: 40PX;
    left: 0;
    display: flex;
    justify-content: center;
  }

	.w-logo{
		height: 60PX;
    user-select: none;
	}

	/* nav菜单 */
	.headul {
		width: 80%;
	}

	.headli {
		width: 12.5%;
    height: 40PX;
    display: flex;
    justify-content: center;
    position: relative;
	}

	.headli:last-child .w-dian {
		opacity: 0;
	}

	.headul a {
		color: #DCDCDC;
		font-size: 18px;
		padding: 9px 0;
	}

	.headul .active {
		color: #ffffff;
    font-size: 18px;
	}

	.w-dian {
		width: 3px;
		height: 3px;
		background: #ffffff;
    position: absolute;
    right: 0;
	}

  /* 子菜单 */
  .submenu_box {
    min-width: 150px;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 50px;
    padding: 10px 20px;
    display: none;
  }

  .submenu_box:hover {
    display: block;
  }

  .submenu_box li:not(:first-child) {
    margin-top: 10px;
  }

  .submenu_box li {
    padding: 10px;
    cursor: pointer;
  }

  .submenu_box li a {
    color: #333333;
  }

  .submenu_box li:hover {
    background: #cccccc;
  }

  .headli:hover .submenu_box {
    display: block;
  }

	/* 搜索 */
	.w-form {
		height: 28px;
	}

	.w-searchbox {
		width: 15%;
		display: block;
		border: 1PX solid #DCDCDC;
		border-radius: 5px;
	}

  .w-searchbox .w-search-btn img {
    height: 15px;
  }

	.el-form-item {
		margin: 0;
		height: 28px;
	}

	.el-input__inner {
		height: 28px;
		line-height: 28px;
	}
</style>
<style>
	.w-headerpage .el-input__inner,
	.w-headerpage .el-button,
	.w-headerpage .el-form-item__content {
		height: 28px;
		line-height: 28px;
	}

	.w-headerpage .w-searchbox .el-button {
		padding: 0 10px;
		background: rgba(255, 255, 255, 0);
		border: none;
	}

	.w-headerpage .el-input__inner {
		border: none;
		background: rgba(255, 255, 255, 0);
	}

	.w-headerpage .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}

	.w-headerpage .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-headerpage .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-headerpage .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-headerpage .el-pagination {
		text-align: center;
	}
</style>
